import React, { useState, useEffect } from 'react';
import { Icon, Row, Col, Button, Tag, Tooltip, Switch } from 'antd';
import { compareClass } from 'src/utils/compare';
import DecisionSet from '../../Component/test/decisionSet';
import './index.less';

function Panel(props) {
  const [value, setValue] = useState(props.value || {});
  const { renderBody, disabled = false, logs = {} } = props;
  const [isRenderBody, setIsRenderBody] = useState(false);
  const { result, variables } = logs;
  useEffect(() => {
    props.value && setValue(props.value);
  }, [props.value]);

  useEffect(() => {
    renderBody && setIsRenderBody(renderBody);
  }, [renderBody]);

  const { cid } = props;

  const toggle = (id) => {
    document.querySelectorAll('.rule-pannel-collapse').forEach((item) => {
      const cid = item.getAttribute('id');
      if (cid === id) {
        if (item.className.indexOf('open') === -1) {
          item.className = 'rule-pannel-collapse open';
          !isRenderBody && setIsRenderBody(true);
        } else {
          item.className = 'rule-pannel-collapse';
        }
      }
    });
  };
  const getHitResult = (id) => {
    const isExcute = result && result.ruleResults.find((item) => item.id === id);
    if (isExcute === undefined) {
      return {
        type: 'log-tag un-excute',
        label: '未执行',
        isExcute: false,
        ruleLogs: {},
      };
    } else {
      if (isExcute.hit) {
        return {
          type: 'log-tag hit-status',
          label: '命中',
          isHit: true,
          isExcute: true,
          ruleLogs: {
            resultLogs: isExcute.conditionResults,
            variables,
          },
        };
      } else {
        return {
          type: 'log-tag not-hit-status',
          label: '未命中',
          isHit: false,
          isExcute: true,
          ruleLogs: {
            resultLogs: isExcute.conditionResults,
            variables,
          },
        };
      }
    }
  };
  const isHasLog = Object.keys(logs).length > 0;
  const { type, label, isHit, isExcute, ruleLogs } = getHitResult(cid);
  const compares = {
    ...props,
    value: {
      stringify: JSON.stringify(value) || {},
    },
    compareData: {
      stringify: props.compareData ? JSON.stringify(props.compareData) : undefined,
    },
  };
  const compareC = compareClass(compares, 'stringify');
  return (
    <div className={`rule-pannel ${compareC}`}>
      <div className='rule-pannel-collapse' id={cid}>
        <div className='rule-pannel-collapse-hd'>
          <Row type='flex' justify='start' gutter={10} align='middle'>
            <Col span={1}>
              <span onClick={() => toggle(cid)} className='toggle'>
                <Icon type='caret-right' />
                <Icon type='caret-down' />
              </span>
            </Col>
            <Col span={19}>
              <Row type='flex' justify='end' gutter={10} align='middle'>
                <Col span={4}>
                  {/* <Row type='flex' justify='start' align='middle'> */}
                  <div span={10}>规则名称</div>
                  <div span={14}>
                    <Tooltip title={value.name} placement='topLeft'>
                      <div className='textflow'>{value.name}</div>
                    </Tooltip>
                  </div>
                  {/* </Row> */}
                </Col>
                <Col span={4}>
                  <div>规则CODE</div>
                  <div>
                    <Tooltip title={value.code} placement='topLeft'>
                      <div className='textflow'>{value.code}</div>
                    </Tooltip>
                  </div>
                </Col>
                <Col span={4}>
                  <div>执行优先级</div>
                  <div className='textflow'>{value.priority}</div>
                </Col>
                <Col span={8}>
                  <div>规则标签</div>
                  <div>
                    {value.tags &&
                      value.tags.map((item) => {
                        return <Tag>{item.name}</Tag>;
                      })}
                  </div>
                </Col>
                <Col span={4}>
                  <Switch disabled checkedChildren='启用' unCheckedChildren='停用' defaultChecked={value.enabled} />
                </Col>
                {/* <Col span={8}>
                  <Row type='flex' justify='start' align='middle'>
                    <Col span={10}>是否启用:</Col>
                    <Col span={14}>{value.enabled ? '是' : '否'}</Col>
                  </Row>
                </Col>
                <Col span={8}>
                  <Row type='flex' justify='start' align='middle'>
                    <Col span={10}>规则标签:</Col>
                    <Col span={14}>{value.tags && value.tags.map((item) => item.name).toString()}</Col>
                  </Row>
                </Col>
                <Col span={8} /> */}
              </Row>
            </Col>
            {!disabled && (
              <Col span={4}>
                <Button
                  type='link'
                  onClick={() => {
                    props.edit && props.edit();
                  }}
                >
                  编辑
                </Button>
                <Button
                  type='link'
                  onClick={() => {
                    // props.copy && props.copy();
                    alert('暂未开发!');
                  }}
                >
                  复制并新增
                </Button>

                <Button type='link' onClick={() => props.del && props.del()}>
                  删除
                </Button>
              </Col>
            )}
            {isHasLog && (
              <Col span={4} style={{ textAlign: 'right' }}>
                <span className={type}>{label}</span>
              </Col>
            )}

            {/* {compareC === 'compare-blue' && <span className='changed'>修改</span>}
            {compareC === 'compare-red' && <span className='del'>删除</span>} */}
          </Row>
        </div>
        <div className='rule-pannel-collapse-body'>
          <DecisionSet
            actions={props.actions}
            value={value}
            logs={ruleLogs}
            variable={props.variable}
            using_variables={props.using_variables}
            hit_result={{ isHit, isExcute }}
            riskTypes={props.riskTypes}
            riskLevels={props.riskLevels}
            isImportant={props.isImportant}
          />
        </div>
      </div>
    </div>
  );
}
export default Panel;
